<template>
  <el-select v-model="selectedValue" placeholder="请选择" :disabled="!parentId" clearable>
    <el-option
        v-for="item in options"
        :key="item.dictDetailId"
        :label="item.val"
        :value="item.name"
    />
  </el-select>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, defineModel } from 'vue'
import {getdictIdList} from "@/views/menus/n-customer-complaint-registration-new/api.ts";

const props = defineProps<{
  parentId: string | null
}>()

const selectedValue = defineModel()
const options = ref([])

// 当 parentId 变化时重新加载数据
watch(
    () => props.parentId,
    async (newVal) => {
      if (newVal) {
        console.log('wtfbeSelect', newVal)
        if (newVal === '接待数据类') {
          getdictIdList({ parentId: 1016 }).then(res => {
            options.value = res
            console.log(options.value)
          })
        } else if (newVal === '接待内容类') {
          getdictIdList({ parentId: 1017 }).then(res => {
            options.value = res
          })
        } else if (newVal === '对接反馈类') {
          getdictIdList({ parentId: 1018 }).then(res => {
            options.value = res
          })
        } else if (newVal === '操作类') {
          getdictIdList({ parentId: 1019 }).then(res => {
            options.value = res
          })
        } else {
          options.value = []
        }
      } else {
        options.value = []
        selectedValue.value = ''
      }
    },
    { immediate: true }
)
</script>